<script setup>
import {
  OfficeBuilding as ElIconOfficeBuilding,
  Tickets as ElIconTickets,
  School as ElIconSchool,
  FirstAidKit as ElIconFirstAidKit,
  User as ElIconUser
} from '@element-plus/icons-vue'

const quickActions = [
  { text: '添加机构', icon: ElIconOfficeBuilding },
  { text: '添加套餐', icon: ElIconTickets },
  { text: '添加科室', icon: ElIconSchool },
  { text: '添加疾病', icon: ElIconFirstAidKit },
  { text: '添加医生', icon: ElIconUser }
]

const handleQuickAction = (action) => {
  console.log('执行快捷操作:', action.text)
  // 这里可以添加路由跳转或其他逻辑
}
</script>

<template>
  <div class="dashboard-container">
    <h2>三大健康综合管理后台</h2>
    <h3>首页</h3>

    <el-row :gutter="20" class="todo-list">
      <el-col :span="8">
        <el-card shadow="hover" class="todo-item">
          <div class="todo-header">
            <span>我的待办</span>
            <el-tag type="danger">问诊</el-tag>
          </div>
          <div class="todo-content">
            <p>你有 5 个待处理的提问</p>
            <el-button type="primary" size="small">立即处理</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="todo-item">
          <div class="todo-header">
            <span>订单发货</span>
          </div>
          <div class="todo-content">
            <p>你有 5 笔订单发货</p>
            <el-button type="primary" size="small">立即处理</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="todo-item">
          <div class="todo-header">
            <span>待处理退货</span>
          </div>
          <div class="todo-content">
            <p>你有 5 笔退货待处理</p>
            <el-button type="primary" size="small">立即处理</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="todo-item">
          <div class="todo-header">
            <span>体检报告</span>
          </div>
          <div class="todo-content">
            <p>你有 3 份体检报告未上传</p>
            <el-button type="primary" size="small">立即处理</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="todo-item">
          <div class="todo-header">
            <span>待处理退款</span>
          </div>
          <div class="todo-content">
            <p>你有 5 笔退待处理</p>
            <el-button type="primary" size="small">立即处理</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="todo-item">
          <div class="todo-header">
            <span>待处理换货</span>
          </div>
          <div class="todo-content">
            <p>你有 5 笔换货待处理</p>
            <el-button type="primary" size="small">立即处理</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="quick-actions">
      <h4>快捷入口</h4>
      <el-row :gutter="20">
        <el-col :span="4" v-for="action in quickActions" :key="action.text">
          <el-button type="text" @click="handleQuickAction(action)">
            <div class="action-item">
              <el-icon :size="30"><component :is="action.icon" /></el-icon>
              <span>{{ action.text }}</span>
            </div>
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.todo-list {
  margin-top: 20px;
}

.todo-item {
  margin-bottom: 20px;
  height: 120px;
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.todo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-actions {
  margin-top: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.action-item span {
  margin-top: 5px;
  font-size: 12px;
}
</style>